<script setup>
import {ref,watch,reactive} from "vue"

let width = ref(0)

let person = ref({
    username: "张三",
    age: 18
})

let unversity = reactive({
    name:"清华大学",
    year:1911
})

// 1、监听基本数据类型
watch(width,(newValue,oldValue) => {
    console.log("new width:",newValue);
})

//  2、监听使用 ref 定义的对象类型
//  2.1 监听整个对象的改变
watch(person,(newValue,oldValue) => {
    console.log("new Person:",newValue)
})

// 2.2 监听对象中的 某一个属性值的改变，采用 getter 函数的形式
watch(() => person.value.username,(newValue,oldValue) => {
    console.log("new person username",newValue)
})

// 2.3 监听对象下所有属性的改变，需要开启深度监听
watch(person,(newValue,oldValue) => {
    console.log("监听所有子属性的改变：",newValue);
},{deep:true})

// 3.1 reactive 监听一个子属性变化
watch(() => unversity.name,(newValue,oldValue) =>{
    console.log('new unversity name',newValue)
})

// 3.2 reactive 监听所有子属性的变化
watch(unversity,(newValue,oldValue) =>{
    console.log(newValue)
})

const changeWidth =() =>{
    width.value ++;
}

const changePerson =() =>{
    person.value={"username":"李四","age":188}
}

const changePersonUsername = ()=>{
    person.value.username+="1"
}

const changePersonAge = ()=>{
    person.value.age += 1
}

const changeUname = () =>{
    unversity.name +=1
}

const changetTime =() =>{
    unversity.year += 1
}
</script>



<template>
    <div>
        <p>宽度：{{ width }}</p>
        <button @click="changeWidth">改变width</button>
    </div>

    <div>
        <p>用户名：{{ person.username}}</p>
        <p>年龄：  {{ person.age }}</p>
        <button @click="changePerson">改变person</button>
        <button @click="changePersonUsername">改变person的username</button>
        <button @click="changePersonAge">改变person的Age</button>
    </div>


    <div>
        <p>
            大学名：{{unversity.name}},建校时间：{{unversity.year}}
        </p>
        <button @click="changeUname">改变学校名</button>
        <button @click="changetTime">改变学校名</button>
    </div>

</template>

<style scoped>
    
</style>